<!--<button *ngFor="let tab of allTabs;" mat-button color="primary" (click)="navigateToTab(tab.value)">{{tab.label}}</button>-->
<nav class="reports-toolbar" fxLayout="row wrap" fxLayoutAlign="space-between center" fxLayoutGap="32px">
<!-- Layout and Report Builder -->
<div class="reports-dash-global-controls" fxFlex="120px" fxLayout="row wrap" fxLayoutAlign="start center">
  <!-- START TAB REPLACEMENT-->
  <div *ngIf="activeTab">
    <button mat-button [matMenuTriggerFor]="categoryMenu" color="default" class="menu-toggle" style="color:var(--fg2);"
      ix-auto ix-auto-type="button" ix-auto-identifier="tab-selector">
      <span>{{ activeTabVerified ? activeTab : ''}} <mat-icon class="menu-caret">arrow_drop_down</mat-icon> </span>
    </button>
  
    <mat-menu #categoryMenu="matMenu" overlapTrigger="false"> 
      <div>
        <button mat-menu-item *ngFor="let tab of allTabs" (click)="navigateToTab(tab.value);"
          ix-auto ix-auto-type="option" ix-auto-identifier="{{tab.label}}">
          <span>{{tab.label | translate}}</span>
        </button>
      </div>
    </mat-menu>
  </div>

</div>
<!-- END TAB REPLACEMENT -->

<!-- Report builder was 632px wide -->
<ng-container *ngIf="activeTab == 'Disk'">
  <entity-toolbar fxFlex [target]="target" [conf]="toolbarConfig"></entity-toolbar>
</ng-container>

</nav>
  
<div *ngIf="visibleReports && activeReports" class="master-container" [ngClass]="{'with-footer-console': isFooterConsoleOpen}" lazyViewer view=".report" fxLayout="row wrap" fxLayoutAlign="space-evenly"> 

    <!-- Cards Container -->
    <cdk-virtual-scroll-viewport itemSize="325" templateCacheSize="4" (scrolledIndexChange)="nextBatch($event, visibleReports[visibleReports.length - 1])">
      <!-- Report Cards -->
      <div class="report-container" *cdkVirtualFor="let key of visibleReports; let i = index;">
          <report *ngIf="retroLogo && activeReports[key] && activeReports[key].identifiers.length > 0" 
            [retroLogo]="retroLogo"
            [report]="activeReports[key]" 
            [multipathTitle]="multipathTitles[activeReports[key].identifiers[0]]"
            [identifier]="activeReports[key].identifiers[0]">
          </report>
          <report *ngIf="activeReports[key].identifiers.length == 0" [report]="activeReports[key]"></report>
      </div>
      <div class="bottom-spacer"></div>
    </cdk-virtual-scroll-viewport>
    <!-- /Cards Container -->
    
    
    <div [style.height.px]="30" *ngIf="isFooterConsoleOpen"></div>
</div>

